<script setup lang="ts">
import { nextTick, ref } from "vue";
import { useClassStore } from "../../store";
import { storeToRefs } from "pinia";
import { useDictionaryStore } from "../../store";
import { ApiClass } from "../../api";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";

const { teachList, adminList, jobList } = storeToRefs(useClassStore());
const { classMajorList } = storeToRefs(useDictionaryStore());
const model = ref<API.Class.Update>({
  cls_id: 0,
  cls_name: "",
  cls_dic_id_major: 0,
  cls_clsr_id: null,
  cls_stf_id_teacher: 0,
  cls_stf_id_admin: 0,
  cls_stf_id_job: 0,
  cls_begin: null,
  cls_end: null,
  cls_remark: "",
});

const formRef = ref<FormInstance | null>(null);
const emits = defineEmits<{ (name: "save", model: API.Class.Update): void }>();
const oldName = ref<string>("");
const cancel = async () => {
  await ElMessageBox.confirm("确定要取消吗？", "提示", { type: "warning" });
  show.value = false;
};
const roules: FormRules = {
  cls_name: [
    { required: true, message: "班级名称不能为空", trigger: "blur" },
    { min: 2, max: 10, message: "长度在2-10个字符", trigger: "blur" },
  
    {  //@ts-ignore
      validator: async (rule, value, callback) => {
        if (oldName.value == value.trim()) {
          callback();
        } else if ((await ApiClass.valid({ cls_name: value })) > 0) {
          callback(new Error("班级名称已存在"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};
const save = async () => {
  await formRef.value?.validate();
  emits("save", model.value);
};
defineExpose({
  begin: (data: API.Class.Update) => {
    formRef.value?.resetFields();
    model.value.cls_id=data.cls_id, 
        model.value.cls_name=data.cls_name,
        model.value.cls_dic_id_major=data.cls_dic_id_major,
        model.value.cls_clsr_id=data.cls_clsr_id,
        model.value.cls_stf_id_teacher=data.cls_stf_id_teacher,
        model.value.cls_stf_id_admin=data.cls_stf_id_admin;
        model.value.cls_stf_id_job=data.cls_stf_id_job,
        model.value.cls_remark=data.cls_remark
        model.value.cls_begin=data.cls_begin
        model.value.cls_end=data.cls_end
        oldName.value=data.cls_name
    nextTick(() => (show.value = true));
  },
  end: () => {
    show.value = false;
  },
});
const show = ref<boolean>(false);
</script>
<template>
  <el-dialog title="班级修改" v-model="show" width="500px">
    <el-form ref="formRef" :model="model" label-width="80px" :rules="roules">
      <el-form-item label="班级名称" prop="cls_name">
        <el-input v-model="model.cls_name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="班级专业">
        <el-select v-model="model.cls_dic_id_major">
          <el-option
            v-for="item in classMajorList"
            :key="item.dic_id"
            :label="item.dic_name"
            :value="item.dic_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教学老师">
        <el-select v-model="model.cls_stf_id_teacher">
          <el-option
            v-for="item in teachList"
            :key="item.stf_id"
            :label="item.stf_name"
            :value="item.stf_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教务老师">
        <el-select v-model="model.cls_stf_id_admin">
          <el-option
            v-for="item in adminList"
            :key="item.stf_id"
            :label="item.stf_name"
            :value="item.stf_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="就业老师">
        <el-select v-model="model.cls_stf_id_job">
          <el-option
            v-for="item in jobList"
            :key="item.stf_id"
            :label="item.stf_name"
            :value="item.stf_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="model.cls_remark"
          placeholder=""
          type="textarea"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style scoped></style>
